<template>
  <div class="work-container">
    <div class="work-header">
      <div class="platform">
        <div>
          <img
            class="logo"
            src="../../assets/logo3.png"
          />
        </div>
        <div class="platform-name">
          | 溪流测试平台
        </div>
      </div>
      <el-dropdown>
        <div class="avatar-wrap">
          <img
            class="avatar"
            src="../../assets/avatar.png"
          />
          <span>{{ nickname }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="onLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="tips">
      <i
        class="el-icon-info"
        style="color:#f57535"
      ></i>
      <span class="tips-content">
        Hello {{ nickname }}，
        <span style="font-size: 14px; color: rgba(0, 110, 255, 0.918);">
          😄 Welcome to the Stream Auto Test Platform ~
        </span>
      </span>
    </div>

    <div class="work-model">
      <div
        class="model-box"
        v-for="(item, index) in tableData"
        :key="item.project_name"
        :name="item.project_name"
      >
        <div class="icon-box">
          <img
            :src="url[index]"
            class="icon-img"
          />
        </div>
        <h3 class="project-name">
          {{ item.project_name }}
        </h3>
        <p class="project-desc">
          {{ item.desc }}
        </p>
        <el-button
          class="button"
          @click="intoSystem(index, item)"
          size="small"
        >立即进入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserProject } from "@/api/user";

export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      // 图片地址
      url: [
        "https://res.shiguangkey.com/fuxi/2021/4/15/e8e4cf4da5/%E6%9D%A9%E6%84%AF%E6%83%80%E7%BB%AF%E8%8D%A4%E7%B2%BA.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/30c4063d8c/%E9%8E%B4%E6%A8%BC%E6%9A%90%E7%81%8F%E5%BF%95%E2%96%BC%E6%90%B4.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/ce92007031/%E6%A6%84%E6%97%80%E6%9F%9F.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/20a27be684/%E9%90%A9%E5%AD%98%E6%8C%B1.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/a35e97da5b/%E5%A6%97%E5%86%A9%E6%BD%95.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/37daf5e626/%E6%A4%B4%E4%BD%BA%E5%BD%AE.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/975dc272e8/erp.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/5fd5beaa07/crm.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/7eddb03e64/MVP.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/e3935cfb7f/%E5%B9%BF%E5%91%8A%E5%AA%92%E4%BD%932.png",
        "https://res.shiguangkey.com/fuxi/2021/4/16/45b682d408/%E7%A4%BE%E5%8C%BA%E7%AE%A1%E7%90%86-%E5%8F%8D%E7%99%BD.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/0f65f3a017/%E5%A8%BC%EE%85%9E%E7%AA%9E%E7%81%8F%E5%BF%93%E6%8C%85.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/e8e4cf4da5/%E6%9D%A9%E6%84%AF%E6%83%80%E7%BB%AF%E8%8D%A4%E7%B2%BA.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/30c4063d8c/%E9%8E%B4%E6%A8%BC%E6%9A%90%E7%81%8F%E5%BF%95%E2%96%BC%E6%90%B4.png",
        "https://res.shiguangkey.com/fuxi/2021/8/24/23c6328cd4/icon-jianzhi.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/975dc272e8/erp.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/5fd5beaa07/crm.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/7eddb03e64/MVP.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/ce92007031/%E6%A6%84%E6%97%80%E6%9F%9F.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/20a27be684/%E9%90%A9%E5%AD%98%E6%8C%B1.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/a35e97da5b/%E5%A6%97%E5%86%A9%E6%BD%95.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/37daf5e626/%E6%A4%B4%E4%BD%BA%E5%BD%AE.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/e3935cfb7f/%E5%B9%BF%E5%91%8A%E5%AA%92%E4%BD%932.png",
        "https://res.shiguangkey.com/fuxi/2021/4/16/45b682d408/%E7%A4%BE%E5%8C%BA%E7%AE%A1%E7%90%86-%E5%8F%8D%E7%99%BD.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/0f65f3a017/%E5%A8%BC%EE%85%9E%E7%AA%9E%E7%81%8F%E5%BF%93%E6%8C%85.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/e8e4cf4da5/%E6%9D%A9%E6%84%AF%E6%83%80%E7%BB%AF%E8%8D%A4%E7%B2%BA.png",
        "https://res.shiguangkey.com/fuxi/2021/4/15/30c4063d8c/%E9%8E%B4%E6%A8%BC%E6%9A%90%E7%81%8F%E5%BF%95%E2%96%BC%E6%90%B4.png",
        "https://res.shiguangkey.com/fuxi/2021/8/24/23c6328cd4/icon-jianzhi.png"
      ],
      currentDate: new Date(),
      project_name: [],
      tableData: [],
      totalCount: "",
      nickname: window.localStorage.getItem("nickname"),
      userId: window.localStorage.getItem("userId")
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadProjects();
  },
  mounted() { },

  methods: {
    loadProjects() {
      getUserProject({
        id: this.userId
      }).then(res => {
        this.tableData = res.data.result;
        this.totalCount = res.data.total;
      });
    },

    intoSystem(index, item) {
      window.localStorage.setItem("projectId", item.id);
      this.$router.push("/index/");
    },

    onLogout() {
      this.$confirm("确认退出吗？", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 把用户的登录状态清除
          window.localStorage.removeItem("token");

          // 跳转到登录页面
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    }
  }
};
</script>

<style lang="less">
.work-container {
  min-height: 800px;
  background: #f1f2f5;
  padding-top: 78px;
}

.work-header {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 950px;
  height: 78px;
  display: flex;
  background: #fff;
  box-shadow: 0 1px 0 0 #e5e5ea;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;

  .avatar-wrap {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .platform {
    display: flex;
    align-items: center;

    .logo {
      height: 50px;
      margin: 14px;
    }

    .platform-name {
      font-size: 20px;
    }
  }
}

.tips {
  text-align: center;
  line-height: 41px;
  margin: 24px 348px 11px;
  background-color: #e1e7db;
  width: 1154px;
  color: #303943;
  font-weight: 400;
  font-size: 13px;
  border-radius: 10px;

  .tips-content {
    color: rgba(0, 110, 255, 0.918);
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
  }
}

.work-model {
  width: 1190px;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 10px;

  .model-box {
    box-sizing: border-box;
    flex: 0 0 262px;
    height: 295px;
    background: #fff;
    box-shadow: 5px 10px 30px 0 #eaf1ff;
    margin-right: 35px;
    margin-bottom: 35px;
    padding: 20px 40px 0;
    border-radius: 15px;

    .icon-box {
      background-color: #3073f4;
      border-radius: 50%;
      text-align: center;
      width: 59px;
      height: 59px;

      .icon-img {
        width: 35px;
        height: 35px;
        margin-top: 12px;
      }
    }

    .project-name {
      font-size: 22px;
      font-weight: 540;
    }

    .project-desc {
      color: #a1a1a3;
      height: 78px;
      font-size: 13px;
      margin-top: 9px;
      margin-bottom: 0px;
    }

    .button {
      border-color: #3073f4;
      color: #3073f4;
    }
  }
}
</style>
